<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="openSearch = true"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['purchase:yp:export']"
        >
          导出
        </el-button>
      </el-col>
    </el-row>

    <el-table
      highlight-current-row
      border
      stripe
      v-loading="loading"
      :data="tableData.rows"
      id="tabYpReport"
      @scrollBottom="load"
      height="calc(100% - 100px)"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="#" width="40" type="index" align="center" />
      <el-table-column
        label="营销单号"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="ypSodh"
      />
      <el-table-column
        label="请购单号"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="ypQgdh"
      />
      <el-table-column
        label="物料代码"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="ypWldm"
      />
      <el-table-column
        label="品名规格"
        :show-overflow-tooltip="true"
        align="center"
        prop="itmPmgg"
      ></el-table-column>
      <el-table-column
        label="冲减数量"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="ypCjsl"
      ></el-table-column>
      <el-table-column
        label="单位"
        width="80"
        :show-overflow-tooltip="true"
        align="center"
        prop="itmDw"
      >
        <template #default="scope">
          <dict-tag :options="itmDwOptions" :value="scope.row.itmDw" />
        </template>
      </el-table-column>
      <el-table-column
        label="冲减时间"
        width="150"
        align="center"
        prop="ypTime"
      >
        <template #default="scope">
          <span>{{
            parseTime(scope.row.ypTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查询对话框   -->
    <el-dialog
      title="查询"
      v-model="openSearch"
      :close-on-click-modal="false"
      draggable
      width="650px"
      append-to-body
    >
      <el-form :model="queryParams" ref="queryForm" label-width="75px">
        <el-col :span="24">
          <el-form-item label="品名规格" prop="itmPmgg">
            <el-input v-model="queryParams.itmPmgg"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              clearable
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="营销单号" prop="ypSodh">
            <el-input v-model="queryParams.ypSodh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请购单号" prop="ypQgdh">
            <el-input v-model="queryParams.ypQgdh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物料代码" prop="ypWldm">
            <el-input v-model="queryParams.ypWldm"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            style="margin-top: 25px; display: flex; justify-content: flex-end"
          >
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import YpService from "@/api/purchase/ypService";

export default {
  name: "YpReport",
  data() {
    return {
      // 遮罩层
      loading: true,
      exportLoading: false,
      openSearch: false,
      // 单位
      itmDwOptions: [],
      tableData: {
        rows: [],
        total: 0,
      },
      // 建立日期时间范围
      dateRange: [
        this.$moment().startOf("month").format(),
        this.$moment().endOf("month").format(),
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 40,
        ypSodh: undefined,
        ypQgdh: undefined,
        ypWldm: undefined,
        itmPmgg: undefined,
        params: {
          beginYpJlrq: this.$moment().startOf("month").format(),
          endYpJlrq: this.$moment().endOf("month").format(),
        },
      },
    };
  },
  created() {
    this.getList();
    this.getDicts("sys_unit").then((response) => {
      this.itmDwOptions = response.data;
    });
  },
  watch: {
    dateRange(val, old) {
      if (val && val[1]) {
        this.queryParams.params.beginYpJlrq = val[0];
        this.queryParams.params.endYpJlrq = val[1];
      } else {
        this.queryParams.params = {};
      }
    },
  },
  methods: {
    /** 查询来料入库批退率列表 */
    getList() {
      this.loading = true;
      this.queryParams.pageNum = 1;
      YpService.getListYp(this.queryParams).then((response) => {
        this.tableData = response;
        this.loading = false;
      });
    },
    //load
    load() {
      if (
        this.queryParams.pageNum <
        Math.ceil(this.tableData.total / this.queryParams.pageSize)
      ) {
        this.queryParams.pageNum++;
        YpService.getListYp(this.queryParams).then((response) => {
          this.tableData.rows = this.tableData.rows.concat(response.rows);
          this.tableData.total = response.total;
          this.loading = false;
        });
      }
      return 0;
    },
    // 取消按钮
    cancel() {
      this.openSearch = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
      this.openSearch = false;
    },
    /** 导出按钮操作 */
    handleExport() {
      return YpService.getExportYp(this.queryParams).then((res) =>
        this.download(res.msg)
      );
    },
  },
};
</script>

<style lang="scss" scoped></style>
